
"use client"; // 添加这一行，使组件变为 Client Component

import dayjs from 'dayjs'
import { useCallback, useEffect, useState } from 'react';
import { Calendar, dayjsLocalizer, momentLocalizer, NavigateAction, View } from 'react-big-calendar'
import 'react-big-calendar/lib/css/react-big-calendar.css';
interface EventViewProps {
    event: any[];

}
const BigCalendar: React.FC<EventViewProps> = (props) => {
    dayjs.locale('zh-cn');
    const localizer = dayjsLocalizer(dayjs) // or globalizeLocalizer
    console.log("localizer", new Date(2025, 10, 14, 0, 20))
    // 示例事件数据
    useEffect(() => {
        console.log("props.event", props.event)
        if (props.event&&props.event.length !== 0) {


            setEvents(props.event.map((item: any) => ({
                id: item.taskId,
                title: item.title,
                start: new Date(item.startTime),
                end: new Date(item.endTime),
                allDay: item.allDay || false,
            })))
        }
    }, [props.event])
    // const eventsmessage = [
    //     {
    //         id: 1,
    //         title: '团队周会',
    //         start: new Date(2025, 9, 27, 10, 0), // 2025-10-27 10:00
    //         end: new Date(2025, 9, 27, 11, 15),   // 2025-10-27 11:00
    //         allDay: true,
    //     },
    //     {
    //         id: 2,
    //         title: '产品发布会1',
    //         start: new Date(2025, 10, 14, 0, 20),
    //         end: new Date(2025, 10, 15, 12, 30),
    //         allDay: true
    //     },


    // ]
    const [events, setEvents] = useState<any[]>([]);

    const messages = {
        allDay: '全天',
        previous: '上一页',
        next: '下一页',
        today: '今天',
        month: '月',
        week: '周',
        day: '日',
        agenda: '议程',
        date: '日期',
        time: '时间',
        event: '事件',
        noEventsInRange: '该范围内没有事件',
        showMore: (total: any) => `+${total} 更多`
    };
    const [view, setView] = useState('month');
    const [date, setDate] = useState(new Date()); // 2023年10月

    // 处理事件点击
    const handleSelectEvent = useCallback((event: any) => {
        console.log("event", event)
    }, []);

    // 处理日期范围点击（创建新事件）
    const handleSelectSlot = useCallback(({ start, end }: { start: any; end: any }) => {
        const title = window.prompt('请输入新事件名称');
        if (title) {
            const newEvent = {
                id: events.length + 1,
                title,
                start,
                end,
            };
            setEvents(prev => [...prev, newEvent]);
        }
    }, [events.length]);

    // 处理视图切换
    const handleView = useCallback((newView:any) => {
        setView(newView);
        console.log(`切换到 ${newView} 视图`);
    }, []);

    // 处理导航（上一页/下一页/今天）
    const handleOnNavigate = useCallback((newDate: Date) => {
        setDate(newDate);
        console.log(`导航到: ${dayjs(newDate).format('YYYY年MM月')}`);
    }, []);
    return (<>
        <div className="p-20">
            <Calendar
                localizer={localizer}
                events={events}
                startAccessor="start"
                endAccessor="end"
                date={date}
                messages={messages}
                onView={handleView}
                view={view as View}
                onNavigate={handleOnNavigate}
                onSelectEvent={handleSelectEvent}
                onSelectSlot={handleSelectSlot}
                selectable
                style={{ height: 500 }}
            />
            {/*  */}
        </div>
    </>);
}

export default BigCalendar;
